<template>
<div class="cartEmpty">
  <div class="textAlignCenter flex flex-center">
    <img src="@/assets/img/cart/cartEmpty.png">
  </div>
  <p class="textAlignCenter text1">购物车竟然是空的</p>
  <p class="textAlignCenter text2">在忙也记得买点什么犒劳自己~</p>
  <div class="textAlignCenter">
    <button @click="goShopping">去逛逛</button>
  </div>
</div>
</template>

<script>
export default {
name: "cartEmpty",
  methods:{
    goShopping(){
      this.$router.push("/home")
    }
  }
}
</script>

<style scoped>
.cartEmpty{
  width: 100vw;
  height: 79vh;
  background-color: #F5F5F5;
}
.text1{
  font-size: .5rem;
  margin-top: 1rem;
  font-weight: 540;
}
.text2{
  margin-top: .3rem;
  font-size: .4rem;
  color: #777777;
  font-weight: 540;
}
img{
  width: 5rem;
  height: 5rem;
  margin-top: 2rem;
}
button{
  margin-top: .5rem;
  color: #444444;
  border:.01rem solid #CCCCCC;
  font-size: .4rem;
  padding: .2rem .4rem;
  background-color: #F5F5F5;
}
</style>